<template>
  <page-layout>
    <a-card>
      <a-button size="large" @click="$router.go(-1)">返回</a-button>
      <a-form
        style="margin-top: 36px"
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="名称" :required="true">
          <a-input
            placeholder="请输入角色名称"
            size="large"
            v-decorator="[
              'name',
              {
                initialValue: editData.name,
                rules: [{ required: true, message: '请输入角色名称!' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="权限" :required="true">
          <a-select
            mode="multiple"
            style="width: 100%"
            placeholder="请选择权限"
            size="large"
            v-decorator="[
              'permissions',
              {
                initialValue: editData.permissions,
                rules: [{ required: true, message: '请选择权限!' }]
              }
            ]"
          >
            <a-select-option
              v-for="item in selectDatas[0]"
              :key="item.id"
              :value="item.id"
            >
              {{ item.remark }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="菜单" :required="false">
          <a-select
            mode="multiple"
            style="width: 100%"
            placeholder="请选择菜单"
            size="large"
            v-decorator="[
              'menus',
              {
                initialValue: editData.menus,
                rules: [{ required: false, message: '请选择菜单!' }]
              }
            ]"
          >
            <a-select-option
              v-for="item in selectDatas[1]"
              :key="item.id"
              :value="item.id"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
          <a-button type="primary" size="large" @click="handleSubmit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-layout>
</template>
<script>
import { addRoles, getRolesDetail, editRoles } from "@/services/roles";
import { getPermissions } from "@/services/permissions";
import { getMenus } from "@/services/menu";
import PageLayout from "@/layouts/PageLayout";
export default {
  name: "demand",
  components: { PageLayout },
  data() {
    this.form = this.$form.createForm(this);
    return {
      selectDatas: [],
      editData: {}
    };
  },
  created() {
    // 如果时编辑过来
    if (this.$route.query.id) {
      Promise.all([
        getRolesDetail({ id: this.$route.query.id }),
        getPermissions({ type: 2 }),
        getMenus({ type: 2 })
      ]).then((arr) => {
        // eslint-disable-next-line no-debugger
        // debugger;
        const editData = arr.splice(0, 1);
        this.editData = editData[0].data.data;
        // this.editData.menus = [];
        // console.log(this.editData, "this.editData");
        // console.log(this.editData, "this.editData");
        this.selectDatas = arr.map((item) => {
          // if (index === 0) return item.data.data;
          return item.data.data;
        });
        // console.log(this.selectDatas);
      });
    } else {
      Promise.all([getPermissions({ type: 2 }), getMenus({ type: 2 })]).then(
        (arr) => {
          // console.log(arr, "arr");
          this.selectDatas = arr.map((item) => {
            // if (index === 0) return item.data.data.data;
            return item.data.data;
          });
        }
      );
      // console.log(this.selectDatas);
    }
  },
  computed: {},
  methods: {
    handleSubmit() {
      this.form.validateFields((err, values) => {
        console.log(err, values);
        if (!err) {
          if (!this.$route.query.id) {
            addRoles(values).then((res) => {
              // console.log(res, res);
              if (res.data.code === 20000) {
                this.$message.success({
                  content: res.data.message || "提交成功~",
                  onClose: () => {
                    this.form.resetFields();
                    this.$router.go(-1);
                  }
                });
              }
            });
          } else {
            editRoles({ ...this.editData, ...values }).then((res) => {
              // console.log(res, res);
              if (res.data.code === 20000) {
                this.$message.success({
                  content: res.data.message || "修改成功~",
                  onClose: () => {
                    this.form.resetFields();
                    this.$router.go(-1);
                  }
                });
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>
